<template>
	<view>
		<view class="bg">
			<view class="px-20 pb-10 flex flex-y-center flex-x-space-between" :style="`padding-top:${width }px;`">
				<view class="flex flex-y-center flex-1" @click="userPopup=true">
					<image class="round-circle w-60 h-60" :src="USERINFO?.avatar">
					</image>
					<view class="ml-10 flex flex-column">
						<text class="fs-17 fw-600">{{USERINFO?.nickname}}</text>
						<text class="text-grey-2 fs-14 mt-8">{{USERINFO?.id}}</text>
					</view>
				</view>
				<text @click="$page.open('/pages/vip/detail')">{{USERINFO?.is_vip=='1'?'VIP':'普通用户'}}</text>
			</view>
		</view>

		<view class="px-20 py-10">
			<view class="bg-white round-8 p-16">
				<view class="flex flex-x-space-between flex-y-center">
					<view class="flex flex-column grid-gap-10">
						<text class="fw-600 fs-17">账户余额</text>
						<text class="red fs-17 fw-600">￥{{USERINFO?.balance}}</text>
					</view>
					<view>
						<text class="bg-blue round-6 px-12 py-6 text-white fs-13"
							@click="$page.open('/pages/user/transfer')">佣金提现</text>
					</view>
				</view>
				<view class="flex mt-20">
					<view class="grow-1 flex flex-column grid-gap-10 border-right-eee flex-y-center">
						<text class="text-666">累计提现</text>
						<text class="red">￥{{USERINFO?.total_withdrawal}}</text>
					</view>
					<view class="grow-1 flex flex-column grid-gap-10 flex-y-center">
						<text class="text-666">冻结中</text>
						<text class="red">￥{{USERINFO?.freeze_balance}}</text>
					</view>
				</view>
			</view>
		</view>

		<view class="px-20 py-10">
			<view class="bg-white round-12 p-20">
				<text class="fs-17 fw-600">我的服务</text>
				<view class="flex grid-columns-4 mt-18 grid-gap-12">
					<view class="flex flex-column flex-center grid-gap-10" v-for="(item,index) in serviceList"
						:key='index' @click="to(item)">
						<image :src="item.icon" class="w-28 h-28"></image>
						<text class="fs-13">{{item.name}}</text>
					</view>
				</view>
			</view>
		</view>

		<view class="mt-30 text-center">
			<text class="fs-12 text-999">{{WEBCONFIG?.version}}</text>
		</view>

		<y-popup v-if='popupCustomer' mode='center' @close="popupCustomer = false">
			<view class="bg-white p-20">
				<image :src="WEBCONFIG?.customer_qrcode" class="vw-60" mode="widthFix" show-menu-by-longpress></image>
			</view>
		</y-popup>

		<y-popup v-if='userPopup' mode='bottom' round='20rpx' @close='userPopup=false'>
			<y-user @close='userPopup=false'></y-user>
		</y-popup>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import { useUserStore, useRefs, useWebConfigStore } from '@/stores'
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import { $page, $http } from '@/utils'
	const { USERINFO } = useRefs(useUserStore());
	const { WEBCONFIG } = useRefs(useWebConfigStore());
	const userPopup = ref(false)
	const popupCustomer = ref(false)
	const serviceList = ref([
		{ name: '账户流水', type: 1, icon: '/static/icon/kstx.png' },
		{ name: '进群记录', type: 2, icon: '/static/icon/jqjl.png' },
		{ name: '团队管理', type: 3, icon: '/static/icon/tdgl.png' },
		{ name: '邀请好友', type: 4, icon: '/static/icon/sykb.png' },
		{ name: '关于我们', type: 5, icon: '/static/icon/gywm.png' },
		{ name: '隐私协议', type: 6, icon: '/static/icon/ysxy.png' },
		{ name: '在线客服', type: 7, icon: '/static/icon/zxkf.png' },
	])
	const width = ref(50)
	onLoad(() => {
		width.value += uni.getSystemInfoSync().statusBarHeight

	})
	onShow(() => {
		getUserInfo()
	})

	const getUserInfo = () => {
		const { setUserInfo, isLogin, clearUserInfo } = useUserStore()
		if (isLogin()) {
			$http.get('User/getUser').then(res => {
				setUserInfo(res.data)
			})
		} else {
			clearUserInfo()
			$page.open('/pages/user/login')
		}
	}

	const to = (e) => {
		if (e.type == '1') {
			$page.open('/pages/user/capital')
		}
		if (e.type == '2') {
			$page.open('/pages/order/index')
		}
		if (e.type == '3') {
			$page.switch('/pages/team/index')
		}
		if (e.type == '4') {
			$page.open('/pages/user/invite')
		}
		if (e.type == '5') {
			$page.open('/pages/tags/index?name=about')
		}
		if (e.type == '6') {
			$page.open('/pages/tags/index?name=privacy')
		}
		if (e.type == '7') {
			openCustomer()
		}
	}

	const openCustomer = () => {

		// #ifdef H5
		if (WEBCONFIG.value.customer_status == '1') {
			popupCustomer.value = true
		} else {
			window.location.href = WEBCONFIG.value.official_customer_url
		}
		return
		// #endif

		// #ifdef MP-WEIXIN
		if (WEBCONFIG.value.customer_status == '1') {
			popupCustomer.value = true
		} else {
			wx.openCustomerServiceChat({
				extInfo: {
					url: WEBCONFIG.value.customer_url
				},
				corpId: WEBCONFIG.value.customer_corpId, //必须和你小程序上的一致
				success(res) {
					console.log(res, 1)
				},
				fail(res) {
					console.log(res, 2)
				},
			})
		}
		// #endif
	}
</script>

<style>
	.bg {
		background: radial-gradient(circle at 20% -10%, #6bdfff -100%, transparent 54%),
			radial-gradient(circle at 110% -30%, #7d7dff -100%, transparent 50%);
		background-repeat: no-repeat;
		background-position: top center;
		/* #ifdef H5 */
		background-attachment: fixed;
		/* #endif */
	}

	page {
		background-color: #F9F9FC;
	}

	.red {
		color: #FF4444;
	}

	.bg-blue {
		background-color: #3276f5;
	}
</style>